import React, { useState } from 'react'
import '@/assets/css/confirm.scoped.css'
import { useLocation } from 'react-router'

const Component = () =>
{
  const params = new URLSearchParams(useLocation().search)
  const id = params.get('id')
  const [order,setOrder] = useState({
    roomid:id,
    guest:[],
    origin_price:0,
    price:0,
    starttime:Date.now(),
    endtime:Date.now(),
    couponid:0,
    remark:'',
    type:'wx',
  })
  useEffect(()=>{
    getRoom()
    getGuestList()
  },[])
  //住房
  const [room,setRoom] = useState({})
  const getRoom = async()=>{
    let result = await React.request.get(`/index/room?id=${id}`)
    if(result.code){
      setRoom(result.data)
    }
  }
  //日期
  const [dateShow,setDateShow] = useState(false)
  const [datestr,setDatestr] = useState('')
  const dateConfirm = (value)=>{
    console.log((Date.parse(value[1])-Date.parse(value[0]))/(60*60*24*1000))
    const options:any = {month: 'long', day: 'numeric'}
    setDatestr(`${new Date(value[0]).toLocaleDateString('zh-cn', options)} - ${new Date(value[1]).toLocaleDateString('zh-cn', options)}`)
    setOrder(val=>({
      ...val,starttime:Date.parse(value[0]),endtime:Date.parse(value[1]),
    }))
  }
  //客户
  const [guestShow,setGuestShow] = useState(false)
  const [guestList,setGuestList] = useState([])
  const getGuestList = async()=>{
    let result = await React.request.get(`/index/guest`)
    if(result){
      setGuestList(result)
    }
  }
  const checkGuest = (value)=>{
    setOrder(val=>({...val,guest:value}))
  }
  return (
    <>
      <div className="top"><div>立即预定</div></div>

      <div className='skeleton'>
        {/* 房间信息 */}
        <div className="detail">
          <div className="thumb">
              <img src={room.thumb_text} alt="" />
          </div>
          <div className="right">
              <p>{room.name}</p>
              <p>￥{room.price} / 晚</p>
              <div className="tips">
                  {room.flag_text && room.flag_text.map((flag:any, index:any) => <span key={index}> {flag} </span>)}
              </div>
          </div>
        </div>
        {/* 表单信息 */}
        <div className='skeleton_rect'>
            {/* 入住日期 */}
            <div className='item'>
              <label>入住日期</label>

              <div onClick={() => setDateShow(true)}>
                <React.UI.Input type="text" className="item_name" value={datestr} readOnly placeholder="请选择入住日期" />
              </div>

              {/* 日期选择 */}
              <React.UI.CalendarPicker
                  visible={dateShow}
                  min={Date.now()}
                  selectionMode='range'
                  onClose={() => setDateShow(false)}
                  onMaskClick={() => setDateShow(false)}
                  onConfirm={dateConfirm}
              >
              </React.UI.CalendarPicker>
            </div>
            {/* 住客信息 */}
            <div className='item'>
              <label>住客信息</label>

              <React.UI.Input type="text" className="item_right" placeholder="请选择住客信息" value={order.gueststr} onClick={() => setGuestShow(true)} />

              {/* 弹出层 */}
              <React.UI.Popup visible={guestShow} closeOnMaskClick={true} onMaskClick={() => setGuestShow(false)}>
                  <React.UI.CheckList multiple onChange={checkGuest}>
                      {guestList.map((item:any, key:number) => (
                          <React.UI.CheckList.Item key={key} value={item.id}>{item.nickname}({item.mobile})</React.UI.CheckList.Item>
                      ))}
                  </React.UI.CheckList>
                  <React.UI.Button style={{'--border-radius': '0px'}} block type='button' color='primary' size='large' onClick={()=>setGuestShow(false)}>确定选择</React.UI.Button>
              </React.UI.Popup>
          </div>
        </div>
      </div>
    </>
  )
}

export default Component